<template>
  <div class="box">
    <h4>Child2</h4>
    <div>message: {{ modelValue }}</div>
    <input type="text" :value="modelValue" @input="inputHandler">
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  // 参数e的类型是 'xxx',这里为什么拿一个值作为类型呢?
  // 因为如果使用字符串 -> (e: string): void
  // 那么在触发事件的时候 emit('abc')  emit的参数一可以是任意类型的字符串
  // 而我们期望的是绑定什么事件类型,就只允许触发什么事件类型
  // (e: 'xxx', str: string): void

  (e: 'update:modelValue', str: string): void
}>()


// 值是可以单独的作为一个类型的
// 当使用值作为一个类型的时候,这个变量中存的值也必须是这个类型
// let a: '我爱你' = '我爱你'; 

const inputHandler = (e: Event) => {
  console.log(    (e.target as HTMLInputElement).value    )

  emit('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>
